import React, { useEffect, useRef, useState } from 'react';
import { PageContainer } from '@ant-design/pro-layout';
import {
  Avatar,
  Button,
  Divider,
  Input,
  List,
  message,
  Select,
  Spin,
  Typography,
  Slider,
  Drawer,
  Space,
  Switch,
  Tooltip,
  InputNumber,
  Card,
  Badge,
  Tag,
  Alert,
  Modal,
} from 'antd';
import {
  PlusOutlined,
  RobotOutlined,
  SendOutlined,
  UserOutlined,
  SettingOutlined,
  CloseOutlined,
  UpOutlined,
  DownOutlined,
  ArrowUpOutlined,
  MessageOutlined,
  BulbOutlined,
  ThunderboltOutlined,
  ClockCircleOutlined,
  DashboardOutlined,
  DatabaseOutlined,
  CodeOutlined,
  CopyOutlined,
  DeleteOutlined,
} from '@ant-design/icons';
// @ts-ignore
import { Prism as SyntaxHighlighter } from 'react-syntax-highlighter';
// @ts-ignore
import { vscDarkPlus } from 'react-syntax-highlighter/dist/esm/styles/prism';
import { useModel } from '@umijs/max';
import {
  chat,
  createNewChat,
  getChatHistoryByChatId,
  getChatIdListByAgentType,
  getSupportedModels,
  getChatSessionInfoBatch,
  getChatSessionInfo,
  deleteChat,
} from '@/services/ant-design-pro/chatController';
import styles from './index.less';
import ParticlesBackground from './ParticlesBackground';
import { formatRelativeDate } from '@/utils/date';

const { TextArea } = Input;
const { Title, Paragraph, Text } = Typography;

/**
 * 聊天消息基本类型
 */
interface MessageVO {
  role: string; // 角色：system/user/assistant
  content: string; // 消息内容
  createTime?: string; // 消息创建时间
}

/**
 * API命名空间扩展
 */
declare namespace API {
  interface MessageVO {
    role: string;
    content: string;
    createTime?: string;
  }

  interface ChatMetadata {
    title: string; // 会话标题
    date: string; // 最新消息时间
    messages: number; // 消息数量
  }
}

/**
 * 格式化时间为相对时间描述
 *
 * @param timestamp 时间戳或日期字符串
 * @returns 格式化后的相对时间字符串
 */
const formatTime = (timestamp: string | Date | undefined): string => {
  if (!timestamp) return '';
  const date = typeof timestamp === 'string' ? new Date(timestamp) : timestamp;
  return formatRelativeDate(date.toISOString());
};

/**
 * 模型特性描述配置
 */
const modelFeatures: Record<string, { description: string; isThinking: boolean }> = {
  'deepseek-r1': {
    description: '思考型大模型，会展示思考过程，暂不支持多轮对话记忆功能',
    isThinking: true,
  },
  'deepseek-v3': {
    description: '通用型大模型，支持多轮对话记忆功能',
    isThinking: false,
  },
  'qwen-max': {
    description: '通用型大模型，支持多轮对话记忆功能',
    isThinking: false,
  },
};

/**
 * 模型标签颜色映射
 */
const modelTagColor: Record<string, string> = {
  'deepseek-r1': 'purple',
  'deepseek-v3': 'blue',
  'qwen-max': 'red',
  默认模型: 'default',
};

const ChatPage: React.FC = () => {
  const { initialState } = useModel('@@initialState');
  const currentUser = initialState?.currentUser;

  const [chatIds, setChatIds] = useState<string[]>([]);
  const [currentChatId, setCurrentChatId] = useState<string>('');
  const [messages, setMessages] = useState<MessageVO[]>([]);
  const [inputValue, setInputValue] = useState<string>('');
  const [loading, setLoading] = useState<boolean>(false);
  const [models, setModels] = useState<string[]>([]);
  const [selectedModel, setSelectedModel] = useState<string>('');
  const [isTyping, setIsTyping] = useState<boolean>(false); // 打字动画效果状态

  // 恢复聊天参数设置状态
  const [settingsVisible, setSettingsVisible] = useState<boolean>(false);
  const [systemPrompt, setSystemPrompt] = useState<string>('');
  const [temperature, setTemperature] = useState<number>(0.7);
  const [maxTokens, setMaxTokens] = useState<number>(2048);
  const [agentType, setAgentType] = useState<string>('CHAT');

  // 当前聊天的模型类型
  const [chatModelType, setChatModelType] = useState<Record<string, string>>({});
  // 用户输入缓存
  const [inputCache, setInputCache] = useState<Record<string, string>>({});
  // 系统提示词缓存
  const [systemPromptCache, setSystemPromptCache] = useState<Record<string, string>>({});
  // 错误消息
  const [errorMessage, setErrorMessage] = useState<string>('');

  const messageListRef = useRef<HTMLDivElement>(null);

  // 折叠状态管理
  const [collapsedMessages, setCollapsedMessages] = useState<Record<number, boolean>>({});
  const [collapsedThinking, setCollapsedThinking] = useState<Record<number, boolean>>({});

  // 参考点，用于滚动到特定消息
  const messageRefs = useRef<Record<number, HTMLDivElement | null>>({});

  // 聊天会话的元数据
  const [chatMetadata, setChatMetadata] = useState<Record<string, API.ChatMetadata>>({});

  // 保存系统提示词到localStorage
  useEffect(() => {
    // 从localStorage恢复缓存
    const savedSystemPromptCache = localStorage.getItem('systemPromptCache');
    const savedChatModelType = localStorage.getItem('chatModelType');

    if (savedSystemPromptCache) {
      try {
        setSystemPromptCache(JSON.parse(savedSystemPromptCache));
      } catch (e) {
        console.error('Failed to parse systemPromptCache from localStorage', e);
      }
    }

    if (savedChatModelType) {
      try {
        setChatModelType(JSON.parse(savedChatModelType));
      } catch (e) {
        console.error('Failed to parse chatModelType from localStorage', e);
      }
    }
  }, []);

  // 不再保存inputCache到localStorage

  // 当systemPromptCache更新时保存到localStorage
  useEffect(() => {
    if (Object.keys(systemPromptCache).length > 0) {
      localStorage.setItem('systemPromptCache', JSON.stringify(systemPromptCache));
    }
  }, [systemPromptCache]);

  // 当chatModelType更新时保存到localStorage
  useEffect(() => {
    if (Object.keys(chatModelType).length > 0) {
      localStorage.setItem('chatModelType', JSON.stringify(chatModelType));
    }
  }, [chatModelType]);

  // 当切换chatId时，恢复相应的系统提示词
  useEffect(() => {
    if (currentChatId) {
      // 清空输入内容
      setInputValue('');

      // 恢复该聊天的系统提示词
      if (systemPromptCache[currentChatId]) {
        setSystemPrompt(systemPromptCache[currentChatId]);
      } else {
        setSystemPrompt('');
      }

      // 恢复该聊天的模型类型
      if (chatModelType[currentChatId] && models.includes(chatModelType[currentChatId])) {
        setSelectedModel(chatModelType[currentChatId]);
      }
    }
  }, [currentChatId, systemPromptCache, chatModelType, models]);

  // 获取支持的模型列表
  useEffect(() => {
    const fetchModels = async () => {
      try {
        const res = await getSupportedModels();
        if (res.data && res.data.length > 0) {
          // [MOD] 对模型列表进行排序，确保顺序为qwen-max、deepseek-v3、deepseek-r1
          const sortedModels = [...res.data].sort((a, b) => {
            const modelOrder: Record<string, number> = {
              'qwen-max': 1,
              'deepseek-v3': 2,
              'deepseek-r1': 3,
            };

            // 获取模型顺序值，未定义的模型放在最后
            const orderA = modelOrder[a] || 999;
            const orderB = modelOrder[b] || 999;

            return orderA - orderB;
          });

          setModels(sortedModels);

          // 默认选择最上面的模型（qwen-max）
          setSelectedModel(sortedModels[0]);
        }
      } catch (error) {
        message.error('获取模型列表失败');
      }
    };
    fetchModels();
  }, []);

  // 获取聊天会话列表
  useEffect(() => {
    const fetchChatIds = async () => {
      try {
        // 获取聊天ID列表
        const res = await getChatIdListByAgentType({ type: agentType });
        if (res && res.code === 0 && res.data && res.data.length > 0) {
          setChatIds(res.data);

          // 获取所有聊天的会话信息（包含最近消息时间、消息数量、使用的模型等）
          const batchRes = await getChatSessionInfoBatch({ agentType });
          if (batchRes && batchRes.code === 0 && batchRes.data) {
            const newMetadata: Record<string, API.ChatMetadata> = {};
            const newModelTypes: Record<string, string> = {};

            for (const sessionInfo of batchRes.data) {
              const chatId = sessionInfo.chatId;
              if (chatId) {
                // 格式化日期
                const formattedDate = sessionInfo.lastMessageTime
                  ? formatRelativeDate(sessionInfo.lastMessageTime)
                  : formatRelativeDate(new Date().toISOString());

                // 设置元数据 - 确保messageCount是number类型
                const messageCount =
                  sessionInfo.messageCount !== undefined ? Number(sessionInfo.messageCount) : 0;

                newMetadata[chatId] = {
                  title: sessionInfo.title || `聊天 ${Object.keys(newMetadata).length + 1}`,
                  date: formattedDate,
                  messages: messageCount,
                };

                // 记录模型类型
                if (sessionInfo.modelType) {
                  newModelTypes[chatId] = sessionInfo.modelType;
                } else if (models.length > 0) {
                  newModelTypes[chatId] = models[0];
                }
              }
            }

            // 更新状态
            setChatMetadata(newMetadata);

            // 更新模型类型状态
            const updatedModelTypes = { ...chatModelType };
            Object.entries(newModelTypes).forEach(([id, model]) => {
              if (model) {
                updatedModelTypes[id] = model;
              }
            });
            setChatModelType(updatedModelTypes);
          } else {
            console.error('获取聊天会话信息失败:', batchRes);
          }

          if (!currentChatId && res.data.length > 0) {
            setCurrentChatId(res.data[0]);
          }
        } else {
          console.error('获取聊天ID列表失败:', res);
        }
      } catch (error) {
        message.error('获取聊天会话列表失败');
        console.error('获取聊天会话列表失败:', error);
      }
    };

    fetchChatIds();
  }, [agentType]);

  /**
   * 根据指定chatId获取聊天历史记录
   */
  const fetchChatHistoryByChatId = async (chatId: string) => {
    if (!chatId) return;

    try {
      // 开始加载状态
      setLoading(true);

      // 调用API获取历史消息
      const res = await getChatHistoryByChatId({ chatId });

      if (res.code === 0 && res.data) {
        // 设置消息列表 - 添加类型断言解决类型不匹配问题
        setMessages(res.data as MessageVO[]);
        // 重置错误信息
        setErrorMessage('');

        // 滚动到底部，确保显示最新消息
        setTimeout(scrollToBottom, 100);

        // [MOD] 获取当前聊天会话的详细信息
        try {
          // 获取当前聊天信息
          const sessionInfo = await getChatSessionInfo({ chatId });
          if (sessionInfo && sessionInfo.code === 0 && sessionInfo.data) {
            const info = sessionInfo.data;

            // 格式化日期
            const formattedDate = info.lastMessageTime
              ? formatRelativeDate(info.lastMessageTime)
              : formatRelativeDate(new Date().toISOString());

            // 设置元数据
            const messageCount = info.messageCount !== undefined ? Number(info.messageCount) : 0;
            const newMetadata = { ...chatMetadata };

            newMetadata[chatId] = {
              title: info.title || `聊天 ${Object.keys(newMetadata).length + 1}`,
              date: formattedDate,
              messages: messageCount,
            };

            // 更新元数据
            setChatMetadata(newMetadata);

            // 更新模型类型
            if (info.modelType) {
              setChatModelType((prev) => ({
                ...prev,
                [chatId]: info.modelType || 'GPT_3_5',
              }));
            }
          }
        } catch (infoError) {
          console.error('获取聊天详情失败:', infoError);
          // 不中断主流程
        }
      } else {
        // 处理错误情况
        message.error(res.message || '获取历史记录失败');
        setErrorMessage(res.message || '获取历史记录失败');
      }
    } catch (error) {
      console.error('获取聊天历史记录失败:', error);
      message.error('获取聊天历史记录失败，请检查网络连接');
      setErrorMessage('获取聊天历史记录失败，请检查网络连接');
    } finally {
      // 结束加载状态
      setLoading(false);
    }
  };

  /**
   * 获取聊天历史记录
   */
  const fetchChatHistory = async () => {
    if (!currentChatId) return;
    fetchChatHistoryByChatId(currentChatId);
  };

  /**
   * 创建新的聊天会话（仅清空界面，不调用API）
   */
  const handleCreateNewChat = () => {
    // 清空当前选中的聊天ID，这样在发送消息时会创建新会话
    setCurrentChatId('');

    // 清空消息列表和输入框
    setMessages([]);
    setInputValue('');
    setSystemPrompt('');

    // 重置错误信息
    setErrorMessage('');

    // 显示提示
    message.info('已切换到新对话，发送消息后将自动创建');

    // 聚焦到输入框
    setTimeout(() => {
      document.querySelector('textarea')?.focus();
    }, 100);
  };

  /**
   * 发送消息并获取AI回复
   */
  const handleSendMessage = async () => {
    // 检查是否有输入内容
    if (!inputValue.trim()) {
      message.warning('请输入消息内容');
      return;
    }

    // 检查是否选择了模型
    if (!selectedModel) {
      message.warning('请选择AI模型');
      return;
    }

    try {
      // 保存用户输入内容
      const userMessage = inputValue;

      // 清空输入框
      setInputValue('');

      // 开始加载和打字动画
      setLoading(true);
      setIsTyping(true);

      // 检查是否需要创建新的聊天会话
      let activeChatId = currentChatId;

      // 如果没有当前会话或者是第一条消息，则创建新会话
      if (!activeChatId || messages.length === 0) {
        try {
          // 调用API创建新会话
          const res = await createNewChat({ agentType });

          if (res.code === 0 && res.data) {
            // 获取新的聊天ID
            activeChatId = res.data;

            // 更新聊天ID列表并切换到新会话
            setChatIds((prevChatIds) => [activeChatId, ...prevChatIds]);
            setCurrentChatId(activeChatId);

            // 初始化新会话的元数据，防止显示“未命名对话”
            const newMetadata = { ...chatMetadata };
            newMetadata[activeChatId] = {
              title: `新对话 ${Object.keys(newMetadata).length + 1}`,
              date: formatRelativeDate(new Date().toISOString()),
              messages: 0,
            };
            setChatMetadata(newMetadata);

            // 缓存新会话的系统提示词
            if (selectedModel) {
              const newChatModelType = { ...chatModelType, [activeChatId]: selectedModel };
              setChatModelType(newChatModelType);
            }

            console.log('发送第一条消息时创建了新会话:', activeChatId);
          } else {
            // 创建会话失败
            message.error(res.message || '创建会话失败');
            setErrorMessage(res.message || '创建会话失败');
            setLoading(false);
            setIsTyping(false);
            return;
          }
        } catch (error) {
          console.error('创建新会话失败:', error);
          message.error('创建新会话失败，请检查网络连接');
          setErrorMessage('创建新会话失败，请检查网络连接');
          setLoading(false);
          setIsTyping(false);
          return;
        }
      }

      // 添加用户消息到消息列表
      const userMessageObj: MessageVO = {
        role: 'user',
        content: userMessage,
        createTime: new Date().toISOString(),
      };
      setMessages((prevMessages) => [...prevMessages, userMessageObj]);

      // 滚动到底部显示用户消息
      setTimeout(scrollToBottom, 100);

      // 准备请求参数
      const params = {
        modelType: selectedModel,
        userPrompt: userMessage,
        systemPrompt: systemPrompt || '',
        temperature: temperature,
        maxTokens: maxTokens,
        chatId: activeChatId,  // 使用可能新创建的会话 ID
        agentType: agentType,
      };

      // 缓存当前会话的系统提示词
      if (systemPrompt) {
        const newSystemPromptCache = { ...systemPromptCache, [activeChatId]: systemPrompt };
        setSystemPromptCache(newSystemPromptCache);
      }

      // 记录当前会话使用的模型类型
      const newChatModelType = { ...chatModelType, [activeChatId]: selectedModel };
      setChatModelType(newChatModelType);

      // 创建一个异步函数处理流式响应
      const processStreamResponse = async () => {
        try {
          // 调用API获取AI回复
          const response = await chat(params);

          // 格式化AI回复内容 - 修复类型错误
          const assistantMessage: MessageVO = {
            role: 'assistant',
            content: Array.isArray(response) ? response.join('') : String(response),
            createTime: new Date().toISOString(),
          };

          // 添加助手回复到消息列表
          setMessages((prevMessages) => [...prevMessages, assistantMessage]);

          // 重置错误消息
          setErrorMessage('');

          // 滚动到底部显示AI回复
          setTimeout(scrollToBottom, 100);

          // [MOD] 刷新会话列表以获取后端更新的会话标题
          try {
            // 获取聊天ID列表
            const res = await getChatIdListByAgentType({ type: agentType });
            if (res && res.code === 0 && res.data) {
              setChatIds(res.data);

              // 获取当前聊天信息 - 使用activeChatId
              const sessionInfo = await getChatSessionInfo({ chatId: activeChatId });
              if (sessionInfo && sessionInfo.code === 0 && sessionInfo.data) {
                const info = sessionInfo.data;

                // 格式化日期
                const formattedDate = info.lastMessageTime
                  ? formatRelativeDate(info.lastMessageTime)
                  : formatRelativeDate(new Date().toISOString());

                // 设置元数据
                const messageCount =
                  info.messageCount !== undefined ? Number(info.messageCount) : 0;
                const newMetadata = { ...chatMetadata };

                newMetadata[activeChatId] = {
                  title: info.title || `聊天 ${Object.keys(newMetadata).length + 1}`,
                  date: formattedDate,
                  messages: messageCount,
                };

                console.log('更新了新聊天的标题:', info.title, '聊天ID:', activeChatId);

                // 更新元数据
                setChatMetadata(newMetadata);

                // 确保当前选中的聊天ID与新创建的一致
                if (currentChatId !== activeChatId) {
                  console.log('更新当前选中的聊天ID从', currentChatId, '到', activeChatId);
                  setCurrentChatId(activeChatId);
                }
              }
            }
          } catch (refreshError) {
            console.error('刷新会话列表失败:', refreshError);
            // 不中断主流程，不显示错误消息
          }
        } catch (error) {
          console.error('AI响应失败:', error);

          // 处理错误情况
          const errorMsg = error instanceof Error ? error.message : '获取AI回复失败';
          setErrorMessage(errorMsg);
          message.error(errorMsg);

          // 尝试从服务器刷新历史记录
          await fetchChatHistory();
        } finally {
          // 结束加载和打字动画
          setLoading(false);
          setIsTyping(false);
        }
      };

      // 执行流式响应处理
      processStreamResponse();
    } catch (error) {
      console.error('发送消息失败:', error);

      // 处理错误情况
      setLoading(false);
      setIsTyping(false);

      const errorMsg = error instanceof Error ? error.message : '发送消息失败';
      setErrorMessage(errorMsg);
      message.error(errorMsg);
    }
  };

  // 切换聊天会话
  const handleChangeChat = (chatId: string) => {
    setCurrentChatId(chatId);
    // 清除错误消息
    setErrorMessage('');
    // 加载选中聊天的历史记录
    fetchChatHistoryByChatId(chatId);
  };

  // 切换AI模型
  const handleModelChange = (model: string) => {
    // 如果当前聊天已经有消息，则不允许切换模型
    if (messages.length > 0) {
      message.warning('聊天已开始，无法切换模型，请创建新会话');
      return;
    }

    setSelectedModel(model);

    // 显示模型特性提示
    if (modelFeatures[model]) {
      if (modelFeatures[model].isThinking) {
        message.info(`已选择思考模型: ${model}，${modelFeatures[model].description}`);
      } else {
        message.info(`已选择模型: ${model}，${modelFeatures[model].description}`);
      }
    }

    // 如果是新聊天或空聊天，更新模型类型
    if (currentChatId && (!chatModelType[currentChatId] || messages.length === 0)) {
      setChatModelType((prev) => ({
        ...prev,
        [currentChatId]: model,
      }));
    }
  };

  // 滚动到底部
  const scrollToBottom = () => {
    if (messageListRef.current) {
      setTimeout(() => {
        messageListRef.current?.scrollIntoView({ behavior: 'smooth', block: 'end' });
      }, 100);
    }
  };

  // 解析消息内容，提取思考部分和代码块
  const parseMessageContent = (content: string = '') => {
    // 提取思考部分
    const thinkRegex = /\{\s*<think>([\s\S]*?)<\/think>\s*\}/;
    const thinkMatch = content.match(thinkRegex);

    let regularContent = thinkMatch ? content.replace(thinkRegex, '').trim() : content;
    let thinkContent = thinkMatch ? thinkMatch[1].trim() : '';

    // 提取代码块并处理高亮
    const codeBlockRegex = /```([a-zA-Z]*)\n([\s\S]*?)```/g;
    let lastIndex = 0;
    let result = '';
    let match;

    while ((match = codeBlockRegex.exec(regularContent)) !== null) {
      // 添加代码块前的文本
      result += regularContent.slice(lastIndex, match.index);

      // 获取语言和代码内容
      const language = match[1] || 'text';
      const code = match[2];

      // 添加代码块的React组件标记
      result += `<CodeBlock language="${language}">${code}</CodeBlock>`;

      // 更新lastIndex
      lastIndex = match.index + match[0].length;
    }

    // 添加剩余的文本
    result += regularContent.slice(lastIndex);

    return {
      hasThinking: !!thinkMatch,
      thinkContent,
      regularContent: result,
      hasCodeBlock: result !== regularContent,
    };
  };

  // 代码块折叠状态管理
  const [codeBlocksCollapsed, setCodeBlocksCollapsed] = useState<Record<string, boolean>>({});

  // 处理代码块折叠切换
  const toggleCodeBlockCollapse = (blockId: string) => {
    setCodeBlocksCollapsed((prev) => ({
      ...prev,
      [blockId]: !prev[blockId],
    }));
  };

  // 处理代码复制
  const handleCopyCode = (code: string) => {
    navigator.clipboard
      .writeText(code)
      .then(() => {
        message.success('代码已复制到剪贴板');
      })
      .catch(() => {
        message.error('复制失败，请手动复制');
      });
  };

  // 渲染带有代码高亮的内容
  const renderContent = (content: string) => {
    if (!content.includes('<CodeBlock')) {
      return content;
    }

    const parts = content.split(/(<CodeBlock language=".*?">.*?<\/CodeBlock>)/gs);

    return (
      <>
        {parts.map((part, index) => {
          const codeBlockMatch = part.match(/<CodeBlock language="(.*?)">(.*?)<\/CodeBlock>/s);

          if (codeBlockMatch) {
            const language = codeBlockMatch[1] || 'text';
            const code = codeBlockMatch[2];
            // 使用唯一ID来标识代码块
            const blockId = `code-block-${index}-${code.substring(0, 20).replace(/\s/g, '')}`;
            const isCollapsed = codeBlocksCollapsed[blockId] || false;

            return (
              <div key={blockId} className={styles.codeBlockWrapper}>
                <div className={styles.codeBlockHeader}>
                  <div className={styles.codeBlockLeft}>
                    <CodeOutlined /> <span>{language}</span>
                  </div>
                  <div className={styles.codeBlockControls}>
                    <Tooltip title={isCollapsed ? '展开' : '折叠'}>
                      <Button
                        type="text"
                        size="small"
                        icon={isCollapsed ? <DownOutlined /> : <UpOutlined />}
                        onClick={() => toggleCodeBlockCollapse(blockId)}
                        className={styles.codeBlockButton}
                      />
                    </Tooltip>
                    <Tooltip title="复制代码">
                      <Button
                        type="text"
                        size="small"
                        icon={<CopyOutlined />}
                        onClick={() => handleCopyCode(code)}
                        className={styles.codeBlockButton}
                      />
                    </Tooltip>
                  </div>
                </div>
                {!isCollapsed && (
                  <SyntaxHighlighter
                    language={language}
                    style={vscDarkPlus}
                    customStyle={{
                      margin: 0,
                      borderRadius: '0 0 6px 6px',
                      fontSize: '13px',
                    }}
                  >
                    {code}
                  </SyntaxHighlighter>
                )}
              </div>
            );
          }

          return <span key={`text-part-${index}`}>{part}</span>;
        })}
      </>
    );
  };

  // 切换消息折叠状态
  const toggleMessageCollapse = (index: number) => {
    setCollapsedMessages((prev) => ({
      ...prev,
      [index]: !prev[index],
    }));
  };

  // 切换思考内容折叠状态
  const toggleThinkingCollapse = (index: number) => {
    setCollapsedThinking((prev) => ({
      ...prev,
      [index]: !prev[index],
    }));
  };

  // 滚动到特定消息
  const scrollToMessage = (index: number) => {
    if (messageRefs.current[index]) {
      messageRefs.current[index]?.scrollIntoView({
        behavior: 'smooth',
        block: 'start',
      });
    }
  };

  // 模型分类
  const isThinkingModel = (model: string) => model === 'deepseek-r1';

  // 恢复打开设置抽屉和关闭设置抽屉的方法
  // 打开设置抽屉
  const showSettings = () => {
    setSettingsVisible(true);
  };

  // 关闭设置抽屉
  const closeSettings = () => {
    setSettingsVisible(false);

    // 缓存系统提示词
    if (systemPrompt && currentChatId) {
      setSystemPromptCache((prev) => ({
        ...prev,
        [currentChatId]: systemPrompt,
      }));
    }
  };

  // 当currentChatId变化时，获取对应的聊天历史记录
  useEffect(() => {
    if (currentChatId) {
      // [MOD] 移除这个useEffect中的fetchChatHistory调用，避免与handleChangeChat中的调用重复
      // 这里不再调用fetchChatHistory，因为当用户点击切换聊天时已经在handleChangeChat中调用了
      // 这个useEffect只在组件初始加载时获取一次历史记录
      if (document.readyState === 'complete') {
        // 当页面已完全加载，说明不是初始化阶段，而是从其他操作改变的currentChatId
        // 不做任何操作
      } else {
        // 组件初始加载时执行一次
        fetchChatHistory();
      }
    }
  }, [currentChatId]);

  // 在组件中添加删除会话的处理函数
  const handleDeleteChat = async (chatId: string, e: React.MouseEvent) => {
    e.stopPropagation(); // 阻止事件冒泡，避免触发选中聊天的操作

    try {
      if (!chatId) {
        message.error('聊天ID不能为空');
        return;
      }

      // 显示确认对话框
      Modal.confirm({
        title: '确认删除',
        content: '确定要删除此聊天会话吗？此操作不可恢复。',
        okText: '删除',
        okType: 'danger',
        cancelText: '取消',
        onOk: async () => {
          try {
            setLoading(true);
            const res = await deleteChat({ chatId });

            if (res && res.code === 0) {
              message.success('删除成功');

              // 从列表中移除
              setChatIds((prevIds) => prevIds.filter((id) => id !== chatId));

              // 如果删除的是当前选中的会话，则切换到第一个会话或清空
              if (chatId === currentChatId) {
                const updatedIds = chatIds.filter((id) => id !== chatId);
                if (updatedIds.length > 0) {
                  setCurrentChatId(updatedIds[0]);
                  // 清空消息列表
                  setMessages([]);
                } else {
                  setCurrentChatId('');
                  setMessages([]);
                }
              }
            } else {
              message.error(res?.message || '删除失败');
            }
          } catch (error) {
            console.error('删除聊天会话失败:', error);
            message.error('删除聊天会话失败，请检查网络连接');
          } finally {
            setLoading(false);
          }
        },
      });
    } catch (error) {
      console.error('删除聊天会话操作失败:', error);
      message.error('操作失败');
    }
  };

  return (
    <PageContainer
      header={{
        title: '智能AI助手',
        ghost: true,
        extra: [
          <Button
            key="view-sessions"
            onClick={() => (window.location.href = '/chat-sessions')}
            icon={<DatabaseOutlined />}
          >
            查看会话记录
          </Button>,
          <Tag key="tag" color="blue" icon={<DashboardOutlined />}>
            当前模式：{agentType}
          </Tag>,
        ],
      }}
    >
      <ParticlesBackground />
      <div className={styles.chatContainer}>
        <div className={styles.sideBar}>
          <Button
            type="primary"
            icon={<PlusOutlined />}
            className={styles.newChatButton}
            onClick={handleCreateNewChat}
          >
            新建聊天
          </Button>

          <div className={styles.chatList}>
            {chatIds.map((chatId) => (
              <div
                key={chatId}
                className={chatId === currentChatId ? styles.chatItemActive : styles.chatItem}
                onClick={() => handleChangeChat(chatId)}
              >
                <div className={styles.chatItemContent}>
                  <MessageOutlined className={styles.chatIcon} />
                  <div className={styles.chatItemInfo}>
                    <div className={styles.chatItemTitle}>
                      {chatMetadata[chatId]?.title || '未命名对话'}
                    </div>
                    <div className={styles.chatItemMeta}>
                      <span className={styles.chatItemDate}>{chatMetadata[chatId]?.date}</span>
                      <Tag color="blue">{chatMetadata[chatId]?.messages || 0} 条消息</Tag>
                      <Tag color={modelTagColor[chatModelType[chatId]] || 'purple'}>
                        {chatModelType[chatId] || (models.length > 0 ? models[0] : '默认模型')}
                      </Tag>
                    </div>
                  </div>
                  <Button
                    type="text"
                    danger
                    size="small"
                    className={styles.chatItemDeleteBtn}
                    icon={<DeleteOutlined />}
                    onClick={(e) => handleDeleteChat(chatId, e)}
                    title="删除会话"
                  />
                </div>
              </div>
            ))}
          </div>
        </div>
        <div className={styles.chatMain}>
          <div className={styles.messageBox}>
            {messages.length === 0 ? (
              <div className={styles.emptyChat}>
                <RobotOutlined className={styles.emptyChatIcon} />
                <h3>开始与AI助手对话</h3>
                <p>
                  选择一个AI模型，然后开始您的对话。您可以询问任何问题，获取信息，请求创意帮助或技术支持。
                </p>

                <Alert
                  message="新对话提示"
                  description={
                    currentChatId
                      ? "当您发送第一条消息时，系统将自动保存这个对话。"
                      : "当您发送第一条消息时，系统将自动创建一个新的对话。"
                  }
                  type="info"
                  showIcon
                  style={{ marginBottom: 16, maxWidth: 600 }}
                />

                {/* 添加思考模型警告提示 */}
                {selectedModel && isThinkingModel(selectedModel) && (
                  <Alert
                    message="思考模型提示"
                    description={`您选择的是思考模型(${selectedModel})，该模型会展示详细的思考过程，但暂不支持多轮对话记忆功能。每次提问请包含完整上下文。`}
                    type="warning"
                    showIcon
                    style={{ marginBottom: 16, maxWidth: 600 }}
                  />
                )}

                <Space>
                  <Button
                    type="primary"
                    icon={<ThunderboltOutlined />}
                    size="large"
                    onClick={() => document.querySelector('textarea')?.focus()}
                  >
                    开始对话
                  </Button>
                  <Button icon={<SettingOutlined />} size="large" onClick={showSettings}>
                    调整参数
                  </Button>
                </Space>
              </div>
            ) : (
              <div className={styles.messageList} ref={messageListRef}>
                {/* 错误消息提示 */}
                {errorMessage && (
                  <div className={styles.errorMessage}>
                    <Alert
                      message={errorMessage}
                      type="error"
                      showIcon
                      closable
                      onClose={() => setErrorMessage('')}
                    />
                  </div>
                )}

                {/* 回到顶部按钮 */}
                {messages.length > 3 && (
                  <Button
                    className={styles.scrollTopButton}
                    type="primary"
                    shape="circle"
                    icon={<ArrowUpOutlined />}
                    onClick={() => scrollToMessage(0)}
                  />
                )}

                {messages
                  .filter((msg) => msg.role !== 'system')
                  .map((msg, index) => {
                    const parsedContent = parseMessageContent(msg.content);
                    return (
                      <div
                        key={index}
                        className={msg.role === 'user' ? styles.userMessage : styles.aiMessage}
                        ref={(el) => (messageRefs.current[index] = el)}
                      >
                        <div className={styles.messageContent}>
                          <div className={styles.messageHeader}>
                            <Avatar
                              icon={msg.role === 'user' ? <UserOutlined /> : <RobotOutlined />}
                              className={msg.role === 'user' ? styles.userAvatar : styles.aiAvatar}
                            />
                            <Text strong className={styles.messageSender}>
                              {msg.role === 'user' ? currentUser?.username || '用户' : 'AI助手'}
                              {msg.createTime && (
                                <span className={styles.messageTime}>
                                  <ClockCircleOutlined style={{ marginLeft: 8 }} />{' '}
                                  {formatTime(msg.createTime)}
                                </span>
                              )}
                            </Text>

                            <div className={styles.messageControls}>
                              <Badge
                                count={index + 1}
                                size="small"
                                className={styles.messageBadge}
                              />
                              <Button
                                type="text"
                                size="small"
                                icon={collapsedMessages[index] ? <DownOutlined /> : <UpOutlined />}
                                onClick={() => toggleMessageCollapse(index)}
                                className={styles.collapseButton}
                              />
                            </div>
                          </div>

                          {!collapsedMessages[index] && (
                            <div className={styles.messageText}>
                              {parsedContent.hasThinking && msg.role === 'assistant' && (
                                <div className={styles.thinkingWrapper}>
                                  <div className={styles.thinkingHeader}>
                                    <div className={styles.thinkingTitle}>
                                      <BulbOutlined /> <Text strong>思考过程</Text>
                                    </div>
                                    <Button
                                      type="text"
                                      size="small"
                                      icon={
                                        collapsedThinking[index] ? <DownOutlined /> : <UpOutlined />
                                      }
                                      onClick={() => toggleThinkingCollapse(index)}
                                      className={styles.collapseButton}
                                    />
                                  </div>
                                  {!collapsedThinking[index] && (
                                    <Card
                                      className={styles.thinkingCard}
                                      size="small"
                                      bordered={false}
                                    >
                                      <pre className={styles.thinkingContent}>
                                        {parsedContent.thinkContent}
                                      </pre>
                                    </Card>
                                  )}
                                </div>
                              )}
                              {renderContent(parsedContent.regularContent)}
                            </div>
                          )}
                        </div>

                        {/* 消息侧面的回到该消息顶部的按钮 */}
                        {!collapsedMessages[index] &&
                          (parsedContent.hasThinking ||
                            parsedContent.regularContent.length > 100) && (
                            <Button
                              className={styles.messageTopButton}
                              type="text"
                              size="small"
                              icon={<ArrowUpOutlined />}
                              onClick={() => scrollToMessage(index)}
                            />
                          )}
                      </div>
                    );
                  })}
                {loading && (
                  <div className={styles.aiMessage}>
                    <div className={styles.messageContent}>
                      <div className={styles.messageHeader}>
                        <Avatar icon={<RobotOutlined />} className={styles.aiAvatar} />
                        <Text strong>AI助手</Text>
                      </div>
                      <div className={styles.messageText}>
                        {isTyping ? (
                          <div className={styles.typingIndicator}>
                            <span></span>
                            <span></span>
                            <span></span>
                          </div>
                        ) : (
                          <React.Fragment>
                            <Spin size="small" /> 正在思考...
                          </React.Fragment>
                        )}
                      </div>
                    </div>
                  </div>
                )}
              </div>
            )}
          </div>
          <div className={styles.inputArea}>
            <div className={styles.topControls}>
              <div className={styles.modelSelector}>
                <Select
                  placeholder="选择AI模型"
                  value={selectedModel}
                  onChange={handleModelChange}
                  style={{ width: 200 }}
                  disabled={messages.length > 0} // 如果已有消息，则禁用选择器
                  options={models.map((model) => ({
                    label: (
                      <div className={styles.modelOption}>
                        <Tag color={modelTagColor[model] || 'default'}>
                          {model}
                          {isThinkingModel(model) && <BulbOutlined style={{ marginLeft: 5 }} />}
                        </Tag>
                        {modelFeatures[model] && (
                          <div className={styles.modelDescription}>
                            {modelFeatures[model].description}
                          </div>
                        )}
                      </div>
                    ),
                    value: model,
                  }))}
                  optionLabelProp="label"
                />
              </div>
              <Tooltip title="参数设置">
                <Button
                  type="text"
                  icon={<SettingOutlined />}
                  onClick={showSettings}
                  className={styles.settingsButton}
                />
              </Tooltip>
            </div>
            <div className={styles.inputBox}>
              <TextArea
                placeholder="输入消息..."
                value={inputValue}
                onChange={(e) => setInputValue(e.target.value)}
                autoSize={{ minRows: 2, maxRows: 6 }}
                onPressEnter={(e) => {
                  if (!e.shiftKey) {
                    e.preventDefault();
                    handleSendMessage();
                  }
                }}
              />
              <Button
                type="primary"
                icon={<SendOutlined />}
                onClick={handleSendMessage}
                className={styles.sendButton}
              />
            </div>
          </div>
        </div>
      </div>

      {/* 参数设置抽屉 */}
      <Drawer
        title="聊天参数设置"
        placement="right"
        onClose={closeSettings}
        open={settingsVisible}
        width={360}
        className="chat-settings-drawer"
        extra={<Button type="text" icon={<CloseOutlined />} onClick={closeSettings} />}
      >
        <div className={styles.settingsContent}>
          <div className={styles.settingItem}>
            <div className={styles.settingLabel}>
              <Text strong>System Prompt</Text>
              <Text type="secondary">定义AI助手的角色和行为</Text>
            </div>
            <TextArea
              value={systemPrompt}
              onChange={(e) => setSystemPrompt(e.target.value)}
              placeholder="例如: 你是一个专业的编程助手，擅长解决代码问题..."
              autoSize={{ minRows: 3, maxRows: 8 }}
            />
            {selectedModel && isThinkingModel(selectedModel) && (
              <Alert
                message="思考模型提示"
                description="对于思考模型，系统提示词会在首次对话时设定，后续无法更改。若需使用不同系统提示词，请创建新会话。"
                type="info"
                showIcon
                style={{ marginTop: 8 }}
              />
            )}
          </div>

          <div className={styles.settingItem}>
            <div className={styles.settingLabel}>
              <Text strong>Temperature: {temperature}</Text>
              <Text type="secondary">
                控制回答的随机性，值越低回答越具有确定性，值越高回答越具有创造性
              </Text>
            </div>
            <div className={styles.sliderWithNumber}>
              <Slider
                min={0}
                max={2}
                step={0.1}
                value={temperature}
                onChange={setTemperature}
                className={styles.slider}
              />
              <InputNumber
                min={0}
                max={2}
                step={0.1}
                value={temperature}
                onChange={(value) => setTemperature(value || 0.7)}
                style={{ width: 70 }}
              />
            </div>
          </div>

          <div className={styles.settingItem}>
            <div className={styles.settingLabel}>
              <Text strong>Max Tokens: {maxTokens}</Text>
              <Text type="secondary">控制回答的最大长度</Text>
            </div>
            <div className={styles.sliderWithNumber}>
              <Slider
                min={2 ** 9}
                max={2 ** 14}
                step={2 ** 9}
                value={maxTokens}
                onChange={setMaxTokens}
                className={styles.slider}
              />
              <InputNumber
                min={2 ** 9}
                max={2 ** 14}
                step={2 ** 9}
                value={maxTokens}
                onChange={(value) => setMaxTokens(value || 2048)}
                style={{ width: 90 }}
              />
            </div>
          </div>

          <div className={styles.settingItem}>
            <div className={styles.settingLabel}>
              <Text strong>Assistant Type</Text>
              <Text type="secondary">选择AI助手的类型</Text>
            </div>
            <Select
              value={agentType}
              onChange={setAgentType}
              style={{ width: '100%' }}
              options={[{ label: '聊天', value: 'CHAT' }]}
            />
          </div>
        </div>
      </Drawer>
    </PageContainer>
  );
};

export default ChatPage;
